<template>
    <div class="rank-detail" >
        <van-icon class="back" name="arrow-left" @click="back"/>
        <div class="rank-cover" :style="rankBgImage" ref="bgImage"></div>
        <div class="name">{{name}}</div>
        <div class="layer" ref="layer"></div>
        <div class="scroll-content" ref="scrollWrapper">
            <scroll ref="scroll" :probeType="probeType" :data="songs" @scroll="scroll" :listen-scroll="listenScroll">
                <ul class="song-list" v-if="songs.length">
                    <li class="item-song" v-for="(item,index) in songs" :key="item.id" @click="_getSourceUrl(index)">
                        <div class="index" :class="{'top-three':index <= 2}">{{index + 1}}</div>
                        <div class="song-info">
                            <p class="song-name van-ellipsis">{{item.name}}</p>
                            <p class="singer van-ellipsis">{{item.ar[0].name}}-{{item.name}}</p>
                        </div>
                    </li>
                </ul>
            </scroll> 
            <loading v-if="!songs.length"></loading>
        </div>
    </div>
</template>

<script>
import Loading from 'components/loading/loading'
import Scroll from 'components/scroll/scroll'
import { Icon } from 'vant'
import { mapMutations, mapActions } from 'vuex'
import { getRankByType, getSourceUrl, getLyric } from 'api/api'
import { playerMixin } from 'common/js/mixin'
export default {
    name:'',
    mixins: [playerMixin],
    data() {
        return {
            probeType: 3,
            listenScroll: true,
            rank:{},
            rankBgImage:{
                "backgroundImage":""
            },
            songs: [],
            name: ''
        }
    },
    mounted() {
        this.imageHeight = this.$refs.bgImage.clientHeight
        this.$refs.scrollWrapper.style.top = this.imageHeight + 'px'
        this._getRankByType()
    },
    methods:{
        _getRankByType() {
            let idx = this.$route.query.idx
            this.name = this.$route.query.name
            this.rankBgImage.backgroundImage = 'url('+ this.$route.query.cover +')'
            getRankByType({idx}).then(res=> {
                this.songs = res.playlist.tracks
                this.list = res.playlist
            })
        },
        _getSourceUrl(index) {
            let id = this.songs[index].id
            let list = this.songs
            this.setPlaylist({id,list,index})
            this.getSongSource()
        },
        scroll(pos) {
            let scale = 1
            const percent = Math.abs(pos.y / this.imageHeight)
            if (pos.y > 0) {
                scale = 1 + percent
            }
            const maxScroll = Math.max(-this.imageHeight + 50, pos.y)
            this.$refs.layer.style['transform'] = `translate3d(0,${maxScroll}px,0)`
            if(pos.y < -this.imageHeight + 50){
                this.$refs.bgImage.style['height'] = `50px`
                this.$refs.bgImage.style['zIndex'] = 10
                this.$refs.bgImage.style['paddingTop'] = 0
            }else{
                this.$refs.bgImage.style['height'] = 0
                this.$refs.bgImage.style['zIndex'] = 0
                this.$refs.bgImage.style['paddingTop'] = `70%`
            }
            this.$refs.bgImage.style['transform'] = `scale(${scale})`
        },
        back() {
            this.$router.back()
        },
        handlePlaylist(list) {
            if(list.length) {
                this.$refs.scrollWrapper.style.bottom = `60px`               
            }else{
                this.$refs.scrollWrapper.style.bottom = `0px`
            }
            this.$refs.scroll.refresh()
        },
        ...mapActions({
            setPlaylist: 'getCurrentSong',
            getSongSource: 'getSongSource'
        })
    },
    components: {
        Loading,
        Scroll,
        [Icon.name]: Icon
    }
}
</script>

<style scoped lang="less">
    .rank-detail{
        z-index: 100;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #fff;
        .back{
            z-index: 30;
            position: absolute;
            top: 12px;
            left: 20px;
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            color: #fff;
            border-radius: 50%;
            background: rgba(0,0,0,.3);
        }
        .name{
            z-index: 30;
            position: absolute;
            left: 50%;
            top: 17px;
            transform: translate3d(-50%,0,0);
            color: #fff;
            font-size: 16px;
        }
        .rank-cover{
            position: relative;
            width: 100%;
            height: 0;
            padding-top: 70%;
            background-size: cover;
            transform-origin: center;
        }
        .layer{
            position: relative;
            height: 100%;
            background: #fff;
        }
        .scroll-content{
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            .song-list{
                padding: 15px 20px;
                .item-song{
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    font-size: 17px;
                    &:last-of-type{
                        margin-bottom: 0;
                    }
                    .index{
                        flex: 0 0 30px;
                        width: 30px;
                        text-align: center;
                        font-weight: 550;
                        font-size: 18px;
                        &.top-three{
                            color: #d43c33;
                        }
                    }
                    .song-info{
                        overflow: hidden;
                        flex: 1;
                        margin-left: 10px;
                        padding-right: 20px;
                        .song-name{
                            width: 100%;
                        }
                        .alias{
                            color: #333;
                        }
                        .singer{
                            line-height: 22px;
                            font-size: 12px;
                            color: #666;
                        }
                    }

                }
            }
        }


    }
</style>
